<template>
	<view class="container">
		<Navbar url="/pages/examination/examination" title="WRONG">
			<view class="delete">
				<image src="/static/imgs/delete.png" @click="handleDelete" />
			</view>
		</Navbar>
		<view class="collection">
			<Question :question="item" v-for="item in wrongList" isWrong :key="item.bankId" />
			<!-- <Wrong v-for="item in wrongList" :key="item.bankId" :wrong="item" /> -->
			<!-- <view class="explanation" ref="stack" :class="{del:isDel}">
				<view class="explanation-area">
					<rich-text :nodes="nodes"></rich-text>
					<view class="line">
						<button class="btn">Explanation</button>
					</view>
				</view>
				<view class="delete" @click="handleDelete">
					Delete
				</view>
			</view> -->
		</view>
	</view>
</template>

<script setup>
	import Navbar from '@/components/Navbar/Navbar.vue';
	import { getWrong, clearWrong } from '@/api/exam.js';
	import { ref } from 'vue';
	import Wrong from './wrong.vue';
	import Question from '@/pages/examination/componentes/question.vue';

	const wrongList = ref([]);

	const handleDelete = async () => {
		const res = await clearWrong();
		if (res.code == 200) wrongList.value = [];
	};

	const getWrongData = async () => {
		const res = await getWrong();
		wrongList.value = res.rows.filter(Boolean);
		console.log('wrongList.value-->', res, wrongList.value);
	};

	getWrongData();
</script>

<style lang="scss" scoped>
	.container {
		padding: 84rpx 38rpx;

		.collection {
			width: 100%;
			overflow: auto;
		}

		.delete {
			width: 42rpx;
			height: 42rpx;
			position: absolute;
			right: 10rpx;
			top: 0;
			bottom: 0;
			margin: auto;

			image {
				width: 42rpx;
				height: 42rpx;
			}
		}

		// .explanation {
		// 	margin-top: 40rpx;
		// 	width: 100%;
		// 	padding: 40rpx 0;
		// 	border-style: solid;
		// 	border-width: 4rpx;
		// 	border-color: #4d4b4b transparent;
		// 	position: relative;

		// 	&.del {
		// 		.explanation-area {
		// 			left: -170rpx;
		// 		}
		// 	}

		// 	&-area {
		// 		position: absolute;
		// 		left: 0;
		// 		top: 0;
		// 		margin: auto;
		// 		width: 100%;
		// 		position: relative;
		// 		background-color: #000000;
		// 		font-family: 'PINGFANG-MEDIUM';
		// 		color: #d4d4d4;
		// 		font-size: 28rpx;
		// 		font-weight: 400;
		// 		line-height: 36rpx;
		// 		z-index: 10;
		// 		transition: all 0.5s;

		// 		.line {
		// 			width: 100%;
		// 			height: 70rpx;
		// 			margin-top: 20rpx;
		// 			position: relative;
		// 		}
		// 	}
		// }
	}
</style>
